<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

	<br>
        <s:if test="listmapComm.size() > 0">
            <s:iterator value="listmapComm" id="list">
                <s:if test="isCurrentUser(#list.userId)==true">
                <li  id="<s:property value="#list.id"/>" style="display: block;position: relative;width: 253px;  margin: 20px 330px 0;">
                    <s:if test="#list.creater.headImage == null">
                        <img src="../resource/com/img/avatars/male.png" class="online" style="width:45px;height:45px">
                    </s:if>
                    <s:else>
                        <%--<img src="../resource/com/img/avatars/male.png" class="online" style="width:45px;height:45px">--%>
                        <img src="../com/file.action?keyId=<s:property value="#list.userId"/>" class="online" style="width:45px;height:45px">
                    </s:else>
                    <span class="message-text" style="min-width: 200px;">
                            <a href="javascript:void(0);" class="username"><s:property value="#list.createUser"/> :(<small><s:property value="formatTime(#list.createDate)"></s:property></small>)
                            </a>
                        </br>
                        <s:if test="#list.atUsers!=''">
                            <small style="color: #008a00; "><s:property value="#list.atUsers"/></small></br>
                        </s:if>

                            <s:property value="#list.text" escape="false"/>

                        <s:if test="#list.model.voice == 'voice'">
                            [语音]
                        </s:if>
                    </span>
                </li>
                </s:if>

                <s:else>
                    <li class="message" id="<s:property value="#list.id"/>">
                        <s:if test="#list.headImage == null">
                            <img src="../resource/com/img/avatars/male.png" class="online" style="width:45px;height:45px">
                        </s:if>
                        <s:else>
                            <%--<img src="../resource/com/img/avatars/male.png" class="online" style="width:45px;height:45px">--%>
                            <img src="../com/file.action?keyId=<s:property value="#list.userId"/>" class="online" style="width:45px;height:45px">
                        </s:else>
                    <span class="message-text" style="min-width: 200px;">
                            <a href="javascript:void(0);" class="username"><s:property value="#list.createUser"/> :(<small><s:property value="formatTime(#list.createDate)"></s:property></small>)
                            </a>
                        <s:if test="#list.atUsers!=''">
                            <small style="color: #008a00; "><s:property value="#list.atUsers"/>:</small></br>
                        </s:if>
                            <s:property value="#list.text" escape="false"/>
                        <s:if test="#list.model.voice == 'voice'">
                            [语音]
                        </s:if>
                    </span>
                    </li>
                </s:else>

            </s:iterator>

        </s:if>
        <s:else>
            <h4> <i class="fa fa-warning"></i> 无批注信息，您可以直接填写批注信息！</h4>
        </s:else>
    </ul>
</div>
<script>
    $(function(){
        //$.fn.atwho.debug = false;
        var jeremy = decodeURI("J%C3%A9r%C3%A9my") // Jérémy
        var names ;

        $.ajax({
            url :"ajax-comment!usersList.action",
            method:"post",
            cache : false,
            dataType : "json",
            async : false,
            data : "",
            success : function(data) {
                names = $.map(data,function(v,i) {
                    return {'id': v.id,'name': v.name,'mobile': v.mobile};
                });
            },
            error:function(data){

            }
        });

        //var emojis = $.map(emojis, function(value, i) {return {key: value, name:value}});

        var at_config = {
            at: "@",
            data: names,
            chooeseIds: $("#chooseIds").val(),
            displayTpl: "<li id='${id}'>${name} <small>${email}</small></li>",
            limit: 200,
            suffix: " "
        }
        <%--var emoji_config = {--%>
        <%--at: ":",--%>
        <%--data: emojis,--%>
        <%--displayTpl: "<li>${name} <img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png'  height='20' width='20' /></li>",--%>
        <%--insertTpl: ':${key}:',--%>
        <%--delay: 400--%>
        <%--}--%>
        $inputor = $('#chat_textarea-expand').atwho(at_config);
        $inputor.caret('pos', 47);
        $inputor.focus().atwho('run');


        <%--emoji_config.insertTpl = "<img src='https://assets-cdn.github.com/images/icons/emoji/${name}.png'  height='20' width='20' />";--%>
        <%--$('#editable').atwho(at_config).atwho(emoji_config);--%>

//        ifr = $('#iframe1')[0];
//        doc = ifr.contentDocument || iframe.contentWindow.document;
//        if ((ifrBody = doc.body) == null) {
//            // For IE
//            doc.write("<body></body>");
//            ifrBody = doc.body;
//        }
//        ifrBody.contentEditable = true;
//        ifrBody.id = 'ifrBody';
//        ifrBody.innerHTML = 'For <strong>WYSIWYG</strong> which using <strong>iframe</strong> such as <strong>ckeditor</strong>';
//        $(ifrBody).atwho('setIframe', ifr).atwho(at_config);
    });
</script>
<script type="text/javascript">
//    $(function(){
//        $("textarea#chat_textarea-expand").bind("input propertychange",function(){
//             if($(this).val().indexOf("@")!=-1){
//                 var actionUrl="ajax-commment!userList.action";
//                 var msg=$(this).val();
//                 var mval=msg.split("@");
//                 var data={usermsg:mval[1]};
////                 ajax_action(actionUrl,data,null,function(pdata){
////
////                 });
//
//             }
//        });
//    });

    function fn_comment_replay(_parentId,_toUsersName,_toUsersId){
        //chat_textarea-expand
        $("#chat_textarea-expand").val("");
        $("#chat_textarea-expand").attr("placeholder","@"+_toUsersName);
        $("ul",$.chat_body).data("toUsersId",_toUsersId)
        $("ul",$.chat_body).data("parentId",_parentId)

        //$("#chat_textarea-expand").val("@"+_toUsers + " ");
    }
</script>